<template>
    <section class="pagerank">
        <h2>{{data.title}}</h2>
        <ul class="pageranks">
            <li class="pageranks-item" v-for="(item,index) of data.dataList" :key="item.id">
                <a :href="data.baseUrl +'/'+ item.id"> <i class="pageranks-order" v-show="data.showTag">{{index + 1}}</i>{{item.name}}</a>
            </li>
        </ul>
    </section>
</template>

<script>
	export default {
		name: "Rank",
        props:['data']
	}
</script>

<style scoped>
    a{
        text-decoration: none;
    }
    .pagerank{
        padding: 10px;
        background-color: #fff;
        box-shadow: 3px 3px 5px #B7B7B7;
        overflow: hidden;
    }
    .pageranks-item:last-of-type{
        margin-bottom: 0;
    }
    .pagerank> h2{
        font-size: 18px;
        font-weight: bolder;
        color:#444;
        position: relative;
        padding-bottom:10px;
        border-bottom: 1px solid #7f828b;
        margin-bottom: 10px;
    }
    .pagerank > h2::after{
        content: "";
        position: absolute;
        bottom:-2px;
        left: 0;
        width: 72px;
        border-bottom: 3px solid #444;
        transition: .5s;
    }
    .pagerank:hover > h2::after{
        width: 100px;
    }
    .pageranks-item{
        transition: .5s;
        word-wrap: break-word;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .pageranks-item a{
        display: inline-block;
        width: 100%;
        line-height: 30px;
        font-size: 14px;
        color:#555;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        transition: .5s;
    }
    .pageranks-order {
        display: inline-block;
        font-size: 13px;
        font-style: normal;
        color: #fff;
        width: 20px;
        line-height: 20px;
        text-align: center;
        background-color: #B1B1B1;
        margin-right: 5px;
    }
    .pageranks li:nth-of-type(1) .pageranks-order{
        background-color: #ff8936;
    }
    .pageranks li:nth-of-type(2) .pageranks-order{
        background-color: #ffa400;
    }
    .pageranks li:nth-of-type(3) .pageranks-order{
        background-color: #FFA368;
    }
    .pageranks-item:hover{
        cursor: pointer;
        transform: translateX(20px);
    }
    .pageranks-item:hover a{
        color:#DE852C;
    }
</style>